<template>
  <div class="echart" style="width: 100%; height: 100%">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div class="echarts6_title">
      <i class="text">总用工</i>
      <span class="echarts6_title_text">{{ zygSum }}</span>
      <i class="text">人</i>
      <span class="text" style="margin-left: 8px">&nbsp;万锭用工</span>
      <span class="echarts6_title_text">{{ wdygSum }}</span>
    </div>
    <div ref="echarts6" style="width: 100%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <div class="echarts6_title">
        <i class="text">总用工</i>
        <span class="echarts6_title_text">{{ zygSum }}</span>
        <i class="text">人</i>
        <span class="text" style="margin-left: 8px">&nbsp;万锭用工</span>
        <span class="echarts6_title_text">{{ wdygSum }}</span>
      </div>
      <el-row type="flex" class="echart-content">
        <el-col :span="24">
          <div class="echart-enlarge" ref="echarts6Large"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "echarts6",
  data() {
    return {
      Dialog: false,
      echarts6: null,
      zygSum: 0,
      xData: [],
      yData: [],
      yData1: [],
      wdygSum: 0,
      echarts6Large: null,
      option: {}
    };
  },
  created() {},
  computed: {
    echarts6State() {
      return this.$store.state.echarts6State;
    }
  },
  watch: {
    echarts6State: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          if (val.data.cjygSum) {
            this.wdygSum = val.data.cjygSum.wdyg;
            this.zygSum = val.data.cjygSum.zyg;
          }
          let xarr = [];
          let ydata = [];
          let ydata1 = [];
          var data = val.data.cjygGxList;
          if (data.length > 0) {
            data.forEach((item) => {
              xarr.push(item.gongxu);
              ydata.push(Number(item.sjyg).toFixed(1));
              ydata1.push(Number(item.wdyg).toFixed(1));
            });
          }
          this.xData = xarr;
          this.yData = ydata;
          this.yData1 = ydata1;
          setTimeout(() => {
            this.$nextTick(() => {
              this.echarts6 = this.$echarts.init(this.$refs.echarts6);
              this.init("echarts6");
              if (this.Dialog) {
                this.echarts6Large = this.$echarts.init(this.$refs.echarts6Large);
                this.init("echarts6Large");
              }
            });
          }, 500);
        }
      }
    }
  },

  mounted() {
    this.echarts6 = this.$echarts.init(this.$refs.echarts6);
    this.echarts6.showLoading({
      color: "#ffffff",
      textColor: "#ffffff",
      maskColor: "rgba(255,255,255,0)"
    });
  },
  methods: {
    init(dom) {
      let color = dom == "echarts6" ? "#316B84" : "#fff";
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: dom == "echarts6" ? 12 : 16,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            let str = "<span>" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " : <span class='number'>" +
                item.value +
                "</span></br>";
            });

            return str;
          }
        },
        legend: {
          data: ["实际用工", "万锭用工"],
          itemWidth: dom == "echarts6" ? 8 : 16,
          right: 24,
          itemHeight: dom == "echarts6" ? 8 : 16,
          itemGap: dom == "echarts6" ? 8 : 20,
          textStyle: {
            fontSize: dom == "echarts6" ? 10 : 16,
            color: color
          }
        },
        color: ["#298FFC", "#5AFFC6"],
        grid: {
          left: "5%",
          right: "10%",
          bottom: dom == "echarts6" ? "18%" : "5%",
          top: "12%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.xData,

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: dom == "echarts6" ? 10 : 16,
              color: color
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize:  dom == "echarts6" ? 10 : 16,
              color: color
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        series: [
          {
            name: "实际用工",
            type: "bar",
            barWidth: dom == "echarts6" ? 8 : 30, //柱图宽度
            data: this.yData,
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: dom == "echarts6" ? 10 : 20,
                color: "#fff",
                fontFamily: "electronicFont"
              }
            }
          },
          {
            name: "万锭用工",
            type: "bar",
            barWidth: dom == "echarts6" ? 8 : 30, //柱图宽度
            label: {
              textStyle: {
                fontSize: dom == "echarts6" ? 10 : 20,
                color: "#fff",
                fontFamily: "electronicFont"
              },
              show: true,
              position: "top"
            },
            data: this.yData1
          }
        ]
      };
      this.option = option;
      this[dom].setOption(option);
      this[dom].hideLoading();
      var _this = this;
      window.addEventListener("resize", function () {
        _this[dom].resize();
      });
    },
    openDialog() {
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts6Large = this.$echarts.init(this.$refs.echarts6Large);
          this.init("echarts6Large");
          this.echarts6Large.hideLoading();
          var _this = this;
          window.addEventListener("resize", function () {
            _this.echarts6Large.resize();
          });
        });
      });
    }
  }
};
</script>

<style lang="scss">
.echart-dialog {
  .echarts6_title {
    position: absolute;
    left: 48%;
    padding: 1px;
    color: #fff;
    background: #147bdb;
    border-radius: 2px;
  }
  .text {
    font-size: 20px !important;
  }
  .echarts6_title_text {
    font-size: 22px !important;
    font-family: electronicFont;
    color: #5affc6;
    font-weight: bold;
    margin: 0 5px;
  }
}
</style>
